<template>
	<div class="shopcart">
		<div class="content">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo" :class="{highlight:totalCount>0}">
						<i class="el-icon-menu icon-shopping" :class="{highlight:totalCount>0}"></i>
					</div>
					<div class="num" v-show="totalCount>0">
						{{totalCount}}
					</div>
				</div>
				<div class="price" :class="{highlight:totalPrice>0}">￥{{totalPrice}}
				</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元
				</div>
			</div>
			<div class="content-right">
				<div class="pay" :class="payClass">
					{{payDesc}}
				</div>
			</div class="ball-container">
			<div transition="drop" v-for="ball in balls" v-show="ball.show">
				<div class="inner"></div>
			</div>
			<div>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default {
		props: {
			deliveryPrice: {
				type: Number,
				default: 0
			},
			minPrice: {
				type: Number,
				default: 0
			},
			selectFoods: {
				type: Array,
				default() {
					return [];
				}
			}
		},
		computed: {
			totalPrice() {
				let total = 0;
				this.selectFoods.forEach((food) => {
					total += food.price * food.count;
				});
				return total;
			},
			totalCount() {
				let count = 0;
				this.selectFoods.forEach((food) => {
					count += food.count;
				});
				return count;
			},
			payDesc() {
				if (this.totalPrice === 0) {
					return `￥${this.minPrice}元起送`;
				} else if (this.totalPrice < this.minPrice) {
					let diff = this.minPrice - this.totalPrice;
					return `￥${diff}元起送`;
				} else {
					return '去结算';
				}
			},
			payClass() {
				if (this.totalPrice < this.minPrice) {
					return 'not-enough';
				} else {
					return 'enough';
				}
			}
		},
		methods: {
			drop(el){
             console.log('rs:', el);
			}
		},
		data() {
			return {
				balls: [
				{
					show: true
				},
				{
					show: true
				},
				{
					show: true
				}
				]
			};
		}
	};
</script>

<style type="text/css">
	.shopcart{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 48px;
	}

	.shopcart .content{
		display: flex;
		background: #141d27;
		font-size: 0;
	}

	.content .content-left{
		flex: 1;
	}

	.content-left .logo-wrapper{
		display: inline-block;
		position: relative;
		top:-10px;
		margin: 0 12px;
		padding: 6px;
		width: 56px;
		height: 56px;
		box-sizing: border-box;
		vertical-align: top;
		border-radius: 50%;
		background: #141d27;
	}

	.logo-wrapper .logo{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #2b343c;
		text-align: center;
	}

	.logo-wrapper .highlight{
		background: rgb(0,160,220);
	}

	.logo-wrapper .num{
		position: absolute;
		top:0;
		right: 0;
		width: 24px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		border-radius: 9px;
		font-weight: 700;
		color:#fff;
		background: rgb(240,20,20);
		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
		font-size: 10px;
	}

	.logo .icon-shopping{
		line-height: 44px;
		font-size: 24px;
		color: #80858a;
	}

	.logo .highlight{
		color: #fff;
		border-radius: 50%;
	}

	.content-left .price{
		line-height: 24px;/*为了兼容竖线不撑满容器*/
		display: inline-block;
		vertical-align: top;
		margin-top: 12px;
		box-sizing: border-box;
		padding-right: 12px;
		border-right: 1px solid rgba(255,255,255,0.1);
		font-size: 16px;
		font-weight: 700;
		color: rgba(255,255,255,0.4);
	}

	.content-left .highlight{
		color: #fff;
	}

	.content-left .desc{
		display: inline-block;
		vertical-align: top;
		line-height: 24px;
		margin:12px 0 0 12px;
		color:rgba(255,255,255,0.4);
		font-size: 10px;
	}

	.content .content-right{
		flex:0 0 105px;
		width: 105px;
	}

	.content-right .pay{
		height: 48px;
		line-height: 48px;
		text-align: center;
		font-size: 12px;
		color:rgba(255,255,255,0.4);
		font-weight: 700;
		background:#2b333b;
	}

	.content-right .not-enough{
		background: #2b333b;
	}

	.content-right .enough{
		background: #00b43c;
		color: #fff;
	}

	.content .ball-container{

	}

	.ball-container .ball{
		position: fixed;
		left: 32px;
		bottom: 22px;
		z-index: 200;
	}

	.drop-transition{
		transition: all 0.4s;
	}

	.ball .inner{
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: rgb(0,160,220);
		transition: all 0.4s;
	}
</style>
